<template>
	<el-form
		ref="ruleForm"
		:model="ruleForm"
		label-width="100px"
		label-suffix=":"
		:inline="true"
		class="demo-ruleForm"
	>
		<div class="flex">
			<div class="left">
				<el-form-item
					:label="`${$t('dxn.card_ables_list.table_id')}`"
					prop="id"
				>
					<el-input
						v-model.trim="ruleForm.id"
						v-input="{ name: 'symbols' }"
						clearable
						style="width: 230px"
						:placeholder="
							`${$t('dxn.card_ables_list.table_id_placeholder')}`
						"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						size="small"
						icon="el-icon-search"
						:disabled="disabledSearch"
						:loading="disabledSearch"
						@click="submitForm('ruleForm')"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						v-if="exportObj.api"
						type="warning"
						icon="el-icon-download"
						size="small"
						:loading="exportBtnLoading"
						:disabled="disabledSearch"
						@click="exportExcel"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</div>
			<div class="right">
				<el-form-item>
					<el-button
						type="primary"
						size="small"
						class="back"
						@click="back"
					>
						{{ $t('dxn.card_ables_list.back') }}
					</el-button>
				</el-form-item>
			</div>
		</div>
	</el-form>
</template>
<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		value: {
			type: Object,
			default: () => {}
		},
		disabledSearch: {
			type: Boolean,
			default: false
		},
		activeIdx: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			ruleForm: {},
			exportBtnLoading: false
		}
	},
	computed: {
		exportObj() {
			let exportData = { api: '', params: {} }
			if (this.activeIdx === '0' && this.hasPermission('90750074')) {
				// 基础信息-导出
				exportData = {
					api: 'exportCardTableBasicinfo',
					params: { id: this.ruleForm.id }
				}
			} else if (
				this.activeIdx === '1' &&
				this.hasPermission('90750075')
			) {
				// 结算详情-导出
				exportData = {
					api: 'exportCardTableSettlementDetail',
					params: { tableCode: this.ruleForm.id }
				}
			} else if (
				this.activeIdx === '2' &&
				this.hasPermission('90750076')
			) {
				// 手牌数据-导出
				exportData = {
					api: 'exportCardTableHandData',
					params: { tableCode: this.ruleForm.id }
				}
			}
			return exportData
		}
	},
	watch: {
		value: {
			handler(val) {
				this.ruleForm = val
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		exportExcel() {
			if (this.ruleForm.id) {
				this.exportBtnLoading = true
				this.exportExcelPublic({
					api: this.exportObj.api,
					params: this.exportObj.params
				}).finally(() => {
					this.exportBtnLoading = false
				})
			} else {
				this.$message.closeAll()
				this.$message.error('无相关数据')
			}
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$emit('submit', this.ruleForm)
				} else {
					return false
				}
			})
		},
		back() {
			this.$router.go(-1)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-range-input {
	background: #fff;
}
.params {
	.demo-ruleForm {
		.flex {
			display: flex;
			justify-content: space-between;
			.right {
				flex: 1;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
}
</style>
